<!--
 * @Author      : ZhouQiJun
 * @Date        : 2025-07-24 20:56:08
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2025-08-10 21:42:16
 * @Description : 关于博主，前端程序员，最近专注于 webGIS 开发
 * @加微信         : MasonChou123，进技术交流群
-->
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'

import { type Attachment, Event, type GisRef, setupBaseLayer, setupEvents, setupMap } from '#ol-vue-hooks'

import type BaseEvent from 'ol/events/Event'

import { baseLayers, guiYang3857 } from './testData'

const mapContainer = ref()
let gis: GisRef | null = null
let clearEvents: ReturnType<typeof setupEvents>
onMounted(() => {
  gis = setupMap(mapContainer.value, {
    center: guiYang3857 as [number, number],
    //地图初始显示级别
    zoom: 10,
    projection: 'EPSG:3857',
    // minZoom: 1,
    // maxZoom: 20,
    bgUrl: false,
  })
  setupBaseLayer(baseLayers[0]).then((layer) => {
    console.log({ layer }, 'zqj')
  })
  clearEvents = setupEvents(Event.CLICK, onClick)
})

onBeforeUnmount(() => {
  clearEvents?.()
  gis!.dispose()
})

function onClick(type: string, attachment: Attachment, olEvent: BaseEvent) {
  console.log({ type, attachment, olEvent })
}
</script>

<template>
  <Fragment>
    <div class="TheSetupMap" ref="mapContainer"></div>
    <div>setupMap 手动初始化。 需要手动销毁地图，设置地图底图等。</div>
  </Fragment>
</template>

<style lang="scss">
.TheSetupMap {
  width: 400px;
  height: 400px;
}
</style>
